<style include="signin-dialog-shared">
  #customizeDialog {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #header {
    background-color: var(--header-background-color);
    height: 124px;
    margin-bottom: 16px
  }

  #avatarContainer {
    --avatar-image-width: 60px;
    --avatar-border: 2px;
    --avatar-size: calc(var(--avatar-image-width) + 2 * var(--avatar-border));
    height: var(--avatar-size);
    left: calc(50% - var(--avatar-size)/2);
    position: absolute;
    top: 30px;
    width: var(--avatar-size);
  }

  #avatar {
    /** The user avatar may be transparent, add a background */
    background-color: var(--md-background-color);
    border: var(--avatar-border) solid var(--md-background-color);
    border-radius: 50%;
    height: var(--avatar-image-width);
    top: 43px;
    width: var(--avatar-image-width);
  }

  .work-badge {
    --badge-width: 20px;
    --badge-offset: -4px;
    background-color: var(--signin-work-badge-background-color);
    border: 2px solid var(--header-background-color);
    border-radius: 50%;
    bottom: var(--badge-offset);
    height: var(--badge-width);
    position: absolute;
    right: var(--badge-offset);
    width: var(--badge-width);
  }

  .work-badge > iron-icon {
    --work-icon-size: 15px;
    bottom: 0;
    color: var(--signin-work-badge-foreground-color);
    height: var(--work-icon-size);
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--work-icon-size);
  }

  #body {
    color: var(--cr-secondary-text-color);
    font-size: 13px;
    line-height: 20px;
    margin: 0 16px;
    text-align: center;
  }

  #title {
    color: var(--cr-primary-text-color);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #nameInput {
    --cr-input-placeholder-color: var(--google-grey-900);
    --cr-input-padding-bottom: 8px;
    --cr-input-padding-top: 8px;
    flex-grow: 1;
    height: 32px;
    margin: 16px auto;
    width: 148px;
  }

  #pickThemeContainer {
    flex-grow: 1;
    margin: 16px auto;
  }

  #themeSelector {
    --cr-customize-themes-grid-gap: 7px;
    --cr-customize-themes-icon-size: 36px;
  }

  .action-container {
    padding: 0 16px 16px;
  }

  cr-button {
    font-size: 12px;
    width: 111px;

  }
</style>

<div role="dialog" id="customizeDialog" aria-labelledby="title"
    aria-describedby="content">
  <div id="header">
    <div id="avatarContainer">
      <img id="avatar" alt="" src="[[pictureUrl_]]">
      <div class="work-badge" id="badge" hidden="[[!isManaged_]]">
        <iron-icon class="icon" icon="cr:domain"></iron-icon>
      </div>
    </div>
  </div>

  <div id="body">
    <div id="title">[[welcomeTitle_]]</div>
    <div id="content">$i18n{profileCustomizationText}</div>
  </div>

  <cr-input id="nameInput" pattern=".*\\S.*" value="{{profileName_}}"
    aria-label="$i18n{profileCustomizationInputLabel}" auto-validate
    required spellcheck="false">
  </cr-input>

  <div id="pickThemeContainer">
    <cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
    </cr-customize-themes>
  </div>

  <div class="action-container">
    <cr-button id="doneButton" class="action-button"
        disabled="[[isDoneButtonDisabled_(profileName_)]]"
        on-click="onDoneCustomizationClicked_" autofocus>
      $i18n{profileCustomizationDoneLabel}
    </cr-button>
  <div>
</div>
